<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/dolphin">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style>

        .single-post{
            border-bottom: 1px solid #f4f4f4;
            padding-bottom: 5px;
            padding-left: 5px;
            min-height: 50px;
        }
        .single-post:hover{
            background: #f6f6f6;

        }
        .mailhome_prompt_text {
            position: relative;
            margin: 0 auto;
            top: 48%;
            text-align: center;
            font-size: 18px;
            color: #9b9c9d;
        }
        .layui-side{
            position: unset;

        }
        .layui-col-lg2{
            overflow: auto;
        }
        .layui-nav{
                     background-color: #00000000;
                 }
        .layui-nav .layui-nav-item a {
            color: #0C0C0C;
        }
        .layui-nav .layui-nav-more {
            border-color:  #c3c3c3 transparent transparent;
        }
        .layui-nav .layui-nav-mored, .layui-nav-itemed>a .layui-nav-more {

            border-color: transparent transparent#c3c3c3;
        }

        .layui-nav-tree .layui-nav-item a:hover {
            background-color: #00000000;
            color: #0C0C0C !important;
        }
        .layui-nav-itemed > a, .layui-nav-tree .layui-nav-title a, .layui-nav-tree .layui-nav-title a:hover {
            color: #0C0C0C !important;
            background-color: #00000000;
        }
        .layui-nav-itemed>.layui-nav-child {
            display: block;
            padding: 0;
            background-color: #00000000 !important;
        }
        .layui-nav-tree .layui-nav-bar {
            width: 0px;
            height: 0;

        }

    </style>
</head>
<body >
    <div class="layui-card">
        <div class="layui-card-header">
                <div class="pull-left layui-form-pane dolphin-search-box">
                    <div class="layui-inline">
                        <label class="layui-form-label">搜索</label>
                        <div class="layui-input-block">
                            <input type="text" id="title" placeholder="请输入主题" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-sm" id="searchBtn">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="pull-right screen-btn-group">
                    <button class="layui-btn layui-btn-sm open-popup" data-title="写邮件" th:attr="data-url=@{/system/mail/add}" data-size="max">
                        <i class="layui-icon layui-icon-edit"></i> 写邮件</button>
                    <button class="layui-btn layui-btn-sm open-popup"  data-title="设置" th:attr="data-url=@{/system/mail/setMailBox}" data-size="auto">
                        <i class="fa fa-plus"></i> 设置</button>
                </div>

        </div>
        <div class="layui-card-body">

            <div class="layui-row">
                <div class="layui-col-lg2 layui-col-sm3" lay-filter="layui-mail-side" style="height: 500px;">

                    <!-- 侧边栏 -->
                    <div class="layui-side ">
                        <div class="layui-side-scroll">
                            <ul class="layui-nav layui-nav-tree" lay-filter="demo">
                                <li class="layui-nav-item" >
                                    <a href="javascript:;" style="    left: -12px;">
                                        <i class="layui-icon layui-icon-slider" style="margin-right: 5px;"></i>
                                        <span class="layui-nav-title">常用文件夹</span></a>
                                    <dl class="layui-nav-child" >
                                        <dd class="layui-this">
                                            <a href="javascript:;"  isRead = '1'><i class="layui-icon layui-icon-export" style="margin-right: 5px;"></i><span class="layui-nav-title">所有未读邮件</span></a>
                                        </dd>
                                    </dl>
                                </li>
                                <li class="layui-nav-item" th:each="item,loopStatus:${mailBoxList}">
                                    <a href="javascript:;" style="    left: -12px;">
                                        <i class="layui-icon layui-icon-slider" style="margin-right: 5px;"></i>
                                        <span class="layui-nav-title">[[${#strings.substring(item.mailBoxCode,#strings.indexOf(item.mailBoxCode,'@')+1,#strings.indexOf(item.mailBoxCode,'.'))}]]([[${#strings.substring(item.mailBoxCode,0,#strings.indexOf(item.mailBoxCode,'@'))}]])</span></a>
                                    <dl class="layui-nav-child" >
                                        <dd >
                                            <a href="javascript:;" th:attr="mailBoxCode=${item.mailBoxCode}"  mailType = '1'><i class="layui-icon layui-icon-export" style="margin-right: 5px;"></i><span class="layui-nav-title">收件箱</span></a>
                                        </dd>
                                        <dd >
                                             <a href="javascript:;" th:attr="mailBoxCode=${item.mailBoxCode}" mailType = '2' ><i class="layui-icon layui-icon-file-b" style="margin-right: 5px;"></i><span class="layui-nav-title" >已发送邮件</span></a>
                                        </dd>
                                        <dd >
                                            <a href="javascript:;" th:attr="mailBoxCode=${item.mailBoxCode}"  mailType = '3' ><i class="layui-icon layui-icon-tabs" style="margin-right: 5px;"></i><span class="layui-nav-title" >草稿箱</span></a>
                                        </dd>
                                    </dl>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-lg3 layui-col-sm3" lay-filter="layui-mail-side" style="height: 500px;overflow: auto;" >
                    <div  class="post-area" >

                    </div>

                </div>
                <div class="layui-col-lg7 layui-col-sm3" style="border-left: 1px solid #aac1de;">

                    <iframe height="500px" id="iframe" width="100%" frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”>

                    </iframe>
                </div>
            </div>

        </div>
    </div>
<script th:replace="/common/template :: script"></script>
<script>
     var $='';

     var mailType = '';
     var url = '';
     var mailBoxCode = '';
     var isRead = '1';
     var  flow ,timeago ='';
    layui.use(['laydate','carousel','element','timeago','flow'], function() {
        var laydate = layui.laydate;
          flow = layui.flow;
         $ = layui.$;
        var element = layui.element;
         timeago = layui.timeago;


        folwData('&isRead=1');


        $("#searchBtn").click(function () {
            url = "";
            if($("#title").val()) {

                url = "&title=" + $("#title").val();
                if(mailBoxCode){
                    url +='&mailBoxCode=' + mailBoxCode;
                }
                if(mailType){
                    url +='&mailType=' + mailType;
                }
                if(isRead){
                    url +='&isRead=' + isRead;
                }
                folwData(url);

            }else{
                layer.msg("主题不能为空");
            }
        });

        /* 监听导航栏事件，实现标签页的切换 */
        element.on("nav(demo)", function ($this) {
            url= "";
            mailBoxCode = $this.attr('mailBoxCode');

             mailType = $this.attr('mailType');
            isRead = $this.attr('isRead');
            if(mailBoxCode){
                url +='&mailBoxCode=' + mailBoxCode;
            }
            if(mailType){
                url +='&mailType=' + mailType;
            }

            if(isRead){
                url +='&isRead=' + isRead;
            }
            if (!url){
                return;
            }
            $("#title").val("");
            folwData(url);

        });


    });
     function folwData(url) {
         $(".post-area").html('');
         flow.load({
             elem: '.post-area' //流加载容器
             ,mb:10
             , done: function (page, next) { //执行下一页的回调
                 page = page;
                 var lis = [];
                 $.get('/system/mail/getDataList?page='+url, function(res){
                     if (res.code !=200){
                         layer.msg(res.msg);
                         return;
                     }
                     //假设你的列表返回在data集合中
                     layui.each(res.data.content, function(index, item){
                         lis.push(getString(item));
                     });
                     next(lis.join(''), page < res.data.totalPages);
                     timeago.render($('.timeago'));
                 });
             }
         });
     }
     function getString(data) {
          var time = data.receiveTime;
          if(!time){
              time = data.sendTime;
          }
          var fromUser = data.toUser;
          if(mailType == 1){
              fromUser = data.fromUser;
          }
          if (!fromUser){
              fromUser = '<无收件人>';
          }
         if (!data.title){
             data.title = '<无主题>';
         }
         var str = ' <div class="single-post"> \n' +
             '                            <a  onclick="openUrl(' + data.id + ',this);">\n' +
             '                                <div class="inner-post">\n' +
             '                                    <div class="post-info">\n' +
             '                                        <div class="post-title layui-row">\n' +
             '                                            <div class="layui-col-sm9">\n' +
             '                                                <div class="layui-col-sm1">\n';

           if (data.isRead == 1) {
               str +=  '                                                    <span  class="layui-badge-dot " ></span>\n';
             }else{
               str +=  '                                                    <span class="layui-badge-dot layui-bg-gray"></span>\n';
            }
             str +=  '                                                </div>\n' +
             '                                                <div class="layui-col-sm11">\n' +
             '                                                    <div style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><span>'+fromUser+'</span>' ;
               if (data.attaIds && data.attaIds.length>4){
                   str += '<i class="fa fa-paperclip" style="margin-left: 5px"></i>';
               }
             str +=   '</div>\n' +
             '                                                </div>\n' +
             '                                            </div>\n' +
             '                                            <div class="layui-col-sm3" style=" text-align: right;padding-right: 5px;color: #6f7072;font-size: 12px;">\n' +
             '                                                <span class="timeago" datetime="'+time+'">'+time+'</span>\n' +
             '                                            </div>\n' +
             '\n' +
             '                                        </div>\n' +
             '                                        <div class="blog-meta">\n' +
             '                                            <div style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;color: #6f7072;"><span>'+data.title+'</span></div>\n' +
             '\n' +
             '                                        </div>\n' +
             '                                    </div>\n' +
             '                                </div>\n' +
             '                            </a>\n' +
             '                        </div>'
         return str;

     }
    function openUrl(id,_this) {
        $(_this).parent().siblings().css("background",'#fff');
        $(_this).parent().css("background",'#eeeeee');
        $(_this).find(".layui-badge-dot").addClass("layui-bg-gray");
        var url = "/system/mail/detail/"+id;
        $("#iframe").attr("src",url);
        // $.get(url,function (result) {
        //
        //     if (result.code == 200){
        //
        //         var mail = result.data;
        //         var html = "";
        //         if (mail.fromUser) {
        //
        //             html += "<tr><td style='padding-left: 14px;'><span class='addrtitle'>发件人:</span><span style='color: #5fa207;'>"+mail.fromUser+"</span></td></tr>";
        //         }
        //         if (mail.toUser) {
        //             html += "<tr><td style='padding-left: 14px;'><span class='addrtitle'>收件人:</span><span style='color: #000;'>"+mail.toUser+"</span></td></tr>";
        //         }
        //         if (mail.ccUser) {
        //             html += "<tr><td style='padding-left: 14px;'><span class='addrtitle'>抄送人:</span><span style='color: #798699;'>"+mail.ccUser+"</span></td></tr>";
        //
        //         }
        //         if (mail.ssUser) {
        //             html += "<tr><td style='padding-left: 14px;'><span class='addrtitle'>密送人:</span><span style='color: #798699;'>"+mail.ssUser+"</span></td></tr>";
        //
        //         }
        //         if (mail.sendTime) {
        //             html += "<tr><td style='padding-left: 14px;'><span class='addrtitle'>时间:</span><span style='color: #798699;'>"+mail.sendTime+"</span></td></tr>";
        //
        //
        //         }
        //         if (mail.mailSize) {
        //
        //             html += "<tr><td style='padding-left: 14px;'><span class='addrtitle'>大小:</span><span style='color: #798699;'>"+mail.mailSize+"</span></td></tr>";
        //
        //         }
        //         var attaIds = eval(mail.attaIds);
        //         if(attaIds&&attaIds.length>0){
        //            for(var i = 0;i<attaIds.length;i++){
        //                var attaId =JSON.parse(attaIds[i]);
        //                $('#file').html("<a href='"+attaId.url+"' target='_blank'><i class='icon fa fa-file-o'style='margin-right: 5px'></i>"+attaId.name+"</a>");
        //            }
        //         }
        //
        //         $('#iframe').html(html);
        //         $('#content').html(mail.mailContHtml);
        //         $('#mailTitle').html(mail.title);
        //     }
        //
        // })

    }


</script>
</body>
</html>
